import React from 'react';
import styles from './Header.module.css';
import logo from '../../asstes/logo.svg';
import { Layout, Typography, Input, Menu, Button, Dropdown } from 'antd';
import { GlobalOutlined } from '@ant-design/icons';
import { withRouter, RouteComponentProps } from 'react-router-dom';
import store from '../../redux/store';

interface State {
    language: 'zh' | 'en',
    languageList: {
        name: string,
        code: string
    }
}

class HeaderComponent extends React.Component<RouteComponentProps, State> {
    constructor(props) {
        super(props);
        const storeState = store.getState();
        this.state = {
            language: storeState.language,
            languageList: storeState.languageList,
        }
    }
    // 组件创建好dom元素以后、挂载进页面的时候调用
    componentDidMount() {

    }
    // 更新props state变化时执行
    componentDidUpdate() {

    }
    // 销毁 回收内存、删除事件监听
    componentWillUnmount() {

    }

    render() {
        const { history } = this.props;
        return (
            <div className={styles['app-header']}>
                <div className={styles['top-header']}>
                    <div className={styles.inner}>
                        <Typography.Text>让旅游更幸福</Typography.Text>
                        <Dropdown.Button
                            style={{ marginLeft: 15}}
                            overlay={
                                <Menu>
                                    <Menu.Item>中文</Menu.Item>
                                    <Menu.Item>English</Menu.Item>
                                </Menu>
                            }
                            icon={<GlobalOutlined/>}
                        >
                            语言
                        </Dropdown.Button>
                        <Button.Group className={styles['button-group']}>
                            <Button onClick={() => history.push('/register')}>注册</Button>
                            <Button onClick={() => history.push('/login')}>登录</Button>
                        </Button.Group>
                    </div>
                </div>
                <Layout.Header className={styles['main-header']}>
                <span onClick={() => history.push('/')}>
                     <img src={logo} alt="" className={styles['app-logo']}/>
                     <Typography.Title level={3} className={styles.title}>React 旅游网</Typography.Title>
                </span>
                    <Input.Search placeholder={'请输入旅游目的地，主题，或关键字'} className={styles['search-input']}/>
                </Layout.Header>
                <Menu mode={'horizontal'} className={styles['main-menu']}>
                    <Menu.Item key={1}>旅游首页</Menu.Item>
                    <Menu.Item key={2}>周末游</Menu.Item>
                    <Menu.Item key={3}>跟团游</Menu.Item>
                    <Menu.Item key={4}>自由行</Menu.Item>
                </Menu>
            </div>
        )
    }
};

export const Header = withRouter(HeaderComponent);